<template>
  <view class="container">
    <view class="top1 animate__animated animate__fadeInDown">
	  <image src="../../static/image/upOne.png" mode=""></image>
    </view>
    <view class="top2 animate__animated animate__fadeInDown">
	  <image src="../../static/image/upTow.png" mode=""></image>
    </view>
    <view class="top3 animate__animated animate__fadeInDown">
	  <image src="../../static/image/upThree.png" mode=""></image>
    </view>
    <view class="bottom1 animate__animated animate__fadeInUp">
	  <image src="../../static/image/bottomOne.png" mode=""></image>
    </view>
    <view class="bottom2 animate__animated animate__fadeInUp">
	  <image src="../../static/image/bottomTow.png" mode=""></image>
    </view>
    <view class="bottom3 animate__animated animate__fadeInUp">
	  <image src="../../static/image/bottomThree.png" mode=""></image>
    </view>
    <view class="left1 animate__animated animate__fadeInLeft">
	  <image src="../../static/image/leftOne.png" mode=""></image>
    </view>
    <view class="left2 animate__animated animate__fadeInLeft">
	  <image src="../../static/image/leftTow.png" mode=""></image>
    </view>
    <view class="right1 animate__animated animate__fadeInRight">
	  <image src="../../static/image/rightOne.png" mode=""></image>
    </view>
    <view class="right2 animate__animated animate__fadeInRight">
	  <image src="../../static/image/rightTow.png" mode=""></image>
    </view>
    <view class="content animate__animated animate__fadeIn">
      <slot></slot>
    </view>
    <up-loading-page bg-color="rgba(0,0,0,0.5)" :loading="loading" loadingText="正在加载。。。"></up-loading-page>
  </view>
</template>

<script setup lang="ts">
defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped lang="scss">
.container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  // width: 1920rpx;
  // height:1080rpx;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgba(0, 0, 0, 1);

  .top1 {
    width: 191.41rpx;
    height: 41.41rpx;
    position: absolute;
    top: -0.78rpx;
    left: 82.03rpx;
  }

  .top2 {
    width: 216.8rpx;
    height: 76.95rpx;
    position: absolute;
    left: 266.41rpx;
    top: -36.33rpx;
  }

  .top3 {
    width: 191.41rpx;
    height: 41.41rpx;
    position: absolute;
    top: 0rpx;
    right: 82.03rpx;
  }

  .bottom1 {
    width: 229.69rpx;
    position: absolute;
    height: 66.8rpx;
    bottom: -1.17rpx;
    left: 44.53rpx;
  }

  .bottom2 {
    width: 216.8rpx;
    height: 55.47rpx;
    position: absolute;
    left: 266.41rpx;
    bottom: 0px;
  }

  .bottom3 {
    width: 229.69rpx;
    height: 64.45rpx;
    position: absolute;
    bottom: -0.78rpx;
    right: 44.53rpx;
  }

  .left1 {
    width: 41.8rpx;
    height: 423.05rpx;
    position: absolute;
    left: 0;
    top: 0;
  }

  .left2 {
    width: 60.55rpx;
    height: 209.38rpx;
    position: absolute;
    left: 19.14rpx;
    top: -0.78rpx;
  }

  .right1 {
    width: 41.8rpx;
    height: 423.05rpx;
    position: absolute;
    right: 0;
    top: 0;
  }

  .right2 {
    width: 60.55rpx;
    height: 209.38rpx;
    position: absolute;
    right: 19.14rpx;
    top: -0.78rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }

  .top1,
  .top2,
  .top3,
  .bottom1,
  .bottom2,
  .bottom3,
  .left1,
  .left2,
  .right1,
  .right2 {
    animation-duration: 0.5s;
  }

  .content {
	box-sizing: border-box;
    width: 660.14rpx;
    height: 347.66rpx;
    background-image: url("@/static/image/cpContent.png");
    background-size: 100% 100%;
    position: absolute;
    left: 45.31rpx;
    top: 30.47rpx;
    animation-duration: 2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
